/* eslint-disable react/jsx-key */
import React, { useState, useRef } from 'react';
import AutoTable from '@/components/AutoTable';
import InitForm from '@/components/InitForm';
import { Modal, Button, Popconfirm, Form } from 'antd';
import { useRequest } from 'ahooks';
import { doFetch, getFetch } from '@/utils/doFetch';
import { UserAddOutlined } from '@ant-design/icons';
import IconFont from '@/components/IconFont';

//https://restapi.amap.com/v3/geocode/geo?parameters
let defaultFields = {
  name: {
    value: null,
    type: 'input',
    title: '设备名',
    name: ['name'],
    required: true,
  },
  sn: {
    value: null,
    type: 'input',
    title: '设备序列号',
    name: ['sn'],
    required: true,
  },
  address: {
    value: null,
    type: 'input',
    title: '设备具体地址',
    name: ['address'],
    required: false,
    adresscharge: true,
    col: {
      span: 24,
    },
  },
  lng: {
    value: null,
    type: 'inputnumber',
    title: '经度',
    name: ['lng'],
    required: false,
  },
  lat: {
    value: null,
    type: 'inputnumber',
    title: '纬度',
    name: ['lat'],
    required: false,
  },
};

let Firec = ({ route }) => {
  let columns = [
    {
      title: '设备名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '设备序列号',
      dataIndex: 'sn',
      key: 'sn',
    },
    {
      title: '具体地址',
      dataIndex: 'address',
      key: 'address',
      search: false,
    },
    {
      title: '经纬度',
      dataIndex: 'lng',
      key: 'lng',
      search: false,
      render: (dom, row) => {
        return (
          <div style={{ color: "#fff" }}>
            {row.lng},{row.lat}
          </div>
        );
      },
    },
    {
      title: '操作',
      valueType: 'option',
      width: 100,
      render: (text, record, _, action) => [
        // eslint-disable-next-line react/jsx-key
        <a
          style={{ color: '#1890ff' }}
          onClick={() => {
            cv(true);
            cf((fields) => {
              for (let i in fields) {
                fields[i].value = record[i];
              }
              return { ...fields };
            });
            ciftype({
              val: 'edit',
              title: '编辑设备',
              id: record.id,
            });
          }}
        >
          编辑
        </a>,
        <Popconfirm
          placement="bottom"
          title={'确认删除该设备？'}
          onConfirm={() => {
            run({ url: '/vehicle-api/device/' + record.id, params: {}, type: 'delete' });
          }}
          okText="删除"
          cancelText="取消"
        >
          <a style={{ color: '#f50' }}>删除</a>
        </Popconfirm>,
      ],
    },
  ],
    [visible, cv] = useState(false),
    [form] = Form.useForm(),
    [iftype, ciftype] = useState({}),
    [fields, cf] = useState(defaultFields);

  let actionRef = useRef(),
    ChildRef = null;
  function reload() {
    actionRef?.current?.reload();
    ChildRef?.onRefresh();
  }

  let { run, loading } = useRequest(doFetch, {
    debounceWait: 300, //防抖
    manual: true,
    formatResult: (res) => res,
    onSuccess: (result, params) => {
      reload();
      cv(false);
    },
  });

  // columns.map((it) => {
  //   obj[it.key] = it.title;

  // })
  // console.log(JSON.stringify(obj))

  return (
    <div style={{ width: "100%", height: "100%" }}>
      <Modal
        visible={visible}
        title={iftype.title}
        onCancel={() => {
          cv(false);
        }}
        footer={false}
        destroyOnClose={true}
      >
        <InitForm
          fields={fields}
          formRef={form}
          submitData={(values) => {
            if (iftype.val == 'add') {
              run({ url: '/vehicle-api/device', params: values });
            } else {
              run({ url: '/vehicle-api/device/' + iftype.id, params: values, type: 'PUT' });
            }
          }}
          onChange={(changedValues) => {
            //联动操作
          }}
          submitting={loading}
        />
      </Modal>
      <AutoTable
        pagetitle={route.name}
        pageextra={[
          <Button
            type="primary"
            icon={<IconFont type="icon-tianjia" style={{ fontSize: 16 }} />}
            onClick={() => {
              cf((fields) => {
                for (let i in fields) {
                  fields[i].value = null;
                }
                return { ...fields };
              });
              cv(true);
              ciftype({
                title: '新增设备',
                val: 'add',
              });
            }}
          />,
        ]}
        actionRef={actionRef}
        onRef={(node) => (ChildRef = node)}
        path="/vehicle-api/device"
        rowClassName={(record, index) => {
          let className = index % 2 ? 'shallow_gray' : 'deep_gray';
          return className;
        }}
        columns={columns}
      />
    </div>
  );
};

export default Firec;
